<!-- Toolbar -->
<div class="toolbar" role="banner">
  <img width="40" alt="Angular Logo"
    src="" />
  <span>Welcome</span>
  <div class="spacer"></div>
  <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
    <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
      <rect width="400" height="400" fill="none" />
      <path
        d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
        fill="#fff" />
    </svg>
  </a>
</div>

<div class="content" role="main">
  <!-- Next Steps -->
  <p>What do you want to do next with your app?</p>

  <input type="hidden" #selection>

  <div class="card-container">
    <div class="card" (click)="selection.value = 'component'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      </svg>
      <span>New Component</span>
    </div>
    <div class="card" (click)="selection.value = 'material'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      </svg>
      <span>Angular Material</span>
    </div>
    <div class="card" (click)="selection.value = 'pwa'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      </svg>
      <span>Add PWA Support</span>
    </div>
    <div class="card" (click)="selection.value = 'dependency'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      </svg>
      <span>Add Dependency</span>
    </div>
    <div class="card" (click)="selection.value = 'test'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      </svg>
      <span>Run and Watch Tests</span>
    </div>
    <div class="card" (click)="selection.value = 'build'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      </svg>
      <span>Build for Production</span>
    </div>
    <div class="card" (click)="selection.value = 'table'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      </svg>
      <span>Build for table</span>
    </div>
    <div class="card" (click)="selection.value = 'audio'" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      </svg>
      <span>Build for audio</span>
    </div>
    <div class="card" [routerLink]="[ '/home' ]" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      </svg>
      <span>Link for home</span>
    </div>
    <div class="card" [routerLink]="[ '/mobile' ]" tabindex="0">
      <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
      </svg>
      <span>Link for mobile</span>
    </div>
  </div>

  <!-- Terminal -->
  <div class="terminal" [ngSwitch]="selection.value">
    <div *ngSwitchDefault>ng generate component xyz</div>
    <div *ngSwitchCase="'material'">ng add @angular/material</div>
    <div *ngSwitchCase="'pwa'">ng add @angular/pwa</div>
    <div *ngSwitchCase="'dependency'">ng add _____</div>
    <div *ngSwitchCase="'test'">ng test</div>
    <div *ngSwitchCase="'build'">ng build --prod</div>
    <div *ngSwitchCase="'table'">

      <!-- 搜索条件 -->
      <form [formGroup]="formModule" class="search-main" (ngSubmit)="searchDict()">
        <div class="search-item">
          <label for="typeName">系统字典项：</label>
          <input type="text" pInputText formControlName="typeName" id="typeName" placeholder="请输入" autocomplete="off" />
        </div>
        <div class="search-item">
          <label for="type">字典类型值：</label>
          <input type="text" pInputText formControlName="type" id="type" placeholder="请输入" autocomplete="off" />
        </div>
        <div class="search-item">
          <label for="type">字典值：</label>
          <p-dropdown [options]="dictList" optionLabel="desc" placeholder="请选择" [showClear]="true"
            [(ngModel)]="dictSelected" [ngModelOptions]="{'standalone': true}" [style]="{color: '#000'}"
            (onShow)="dictDropdown($event, true)" [filter]="true" filterPlaceholder="请输入过滤条件" emptyFilterMessage="未找到结果"
            [virtualScroll]="true" itemSize="20">
          </p-dropdown>
        </div>
        <div class="search-item search-btn">
          <button pButton type="submit" icon="fa fa-search" label="查询"></button>
        </div>
        <div class="search-item search-btn flex-item-right">
          <button pButton type="button" icon="fa fa-plus" label="新增"></button>
          <button pButton type="button" icon="fa fa-download" label="下载模板"></button>
          <button pButton type="button" icon="fa fa-upload" label="批量导入"></button>
          <button pButton type="button" icon="fa fa-check" label="展示选中数据" (click)="showSelectedData()"></button>
        </div>
      </form>

      <!-- 表格组件 -->
      <oy-r-table [rTable]="rTable"></oy-r-table>
    </div>
    <div *ngSwitchCase="'audio'">
      <oy-r-autio-play [audioList]="audioList"></oy-r-autio-play>
    </div>
  </div>
  <!-- Footer -->

  <svg id="clouds" alt="Gray Clouds Background" xmlns="http://www.w3.org/2000/svg" width="2611.084" height="485.677"
    viewBox="0 0 2611.084 485.677">
    <path id="Path_39" data-name="Path 39"
      d="M2379.709,863.793c10-93-77-171-168-149-52-114-225-105-264,15-75,3-140,59-152,133-30,2.83-66.725,9.829-93.5,26.25-26.771-16.421-63.5-23.42-93.5-26.25-12-74-77-130-152-133-39-120-212-129-264-15-54.084-13.075-106.753,9.173-138.488,48.9-31.734-39.726-84.4-61.974-138.487-48.9-52-114-225-105-264,15a162.027,162.027,0,0,0-103.147,43.044c-30.633-45.365-87.1-72.091-145.206-58.044-52-114-225-105-264,15-75,3-140,59-152,133-53,5-127,23-130,83-2,42,35,72,70,86,49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33,61.112,8.015,113.854-5.72,150.492-29.764a165.62,165.62,0,0,0,110.861-3.236c47,94,178,113,251,33,31.385,4.116,60.563,2.495,86.487-3.311,25.924,5.806,55.1,7.427,86.488,3.311,73,80,204,61,251-33a165.625,165.625,0,0,0,120,0c51,13,108,15,157-5a147.188,147.188,0,0,0,33.5-18.694,147.217,147.217,0,0,0,33.5,18.694c49,20,106,18,157,5a165.625,165.625,0,0,0,120,0c47,94,178,113,251,33C2446.709,1093.793,2554.709,922.793,2379.709,863.793Z"
      transform="translate(142.69 -634.312)" fill="#eee" />
  </svg>

</div>
